<template>
	<view class="team-page">

		
		<scroll-view class="team-content" scroll-y>
			<!-- 团队统计 -->
			<view class="team-stats">
				<view class="stats-card">
					<view class="stats-header">
						<view class="user-avatar">
							<image :src="userInfo.avatar" class="avatar-img" mode="aspectFill"></image>
						</view>
						<view class="user-info">
							<text class="user-name">{{ userInfo.nickname }}</text>
							<text class="user-level">{{ userInfo.level }}</text>
						</view>
						<view class="invite-btn" @click="showInviteCode">
							<text class="btn-text">邀请</text>
						</view>
					</view>
					
					<view class="stats-grid">
						<view class="stats-item">
							<text class="stats-value">{{ teamStats.totalMembers }}</text>
							<text class="stats-label">团队总人数</text>
						</view>
						<view class="stats-item">
							<text class="stats-value">{{ teamStats.directMembers }}</text>
							<text class="stats-label">直推人数</text>
						</view>
						<view class="stats-item">
							<text class="stats-value">¥{{ teamStats.totalCommission }}</text>
							<text class="stats-label">累计佣金</text>
						</view>
						<view class="stats-item">
							<text class="stats-value">¥{{ teamStats.monthCommission }}</text>
							<text class="stats-label">本月佣金</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 功能菜单 -->
			<view class="function-menu">
				<view class="menu-item" @click="goCommissionRecord">
					<view class="menu-icon">
						<u-icon name="money-cny-circle" size="20" color="#27B387"></u-icon>
					</view>
					<text class="menu-text">佣金记录</text>
					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
				</view>
				
				<view class="menu-item" @click="goWithdrawRecord">
					<view class="menu-icon">
						<u-icon name="arrow-up-circle" size="20" color="#ff9500"></u-icon>
					</view>
					<text class="menu-text">提现记录</text>
					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
				</view>
				
				<view class="menu-item" @click="goTeamRule">
					<view class="menu-icon">
						<u-icon name="file-text" size="20" color="#5856d6"></u-icon>
					</view>
					<text class="menu-text">团队规则</text>
					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
				</view>
			</view>
			
			<!-- 团队成员 -->
			<view class="team-members">
				<view class="section-header">
					<text class="section-title">团队成员</text>
					<view class="filter-tabs">
						<view 
							class="tab-item" 
							:class="{ active: currentTab === 'all' }"
							@click="switchTab('all')"
						>
							<text class="tab-text">全部</text>
						</view>
						<view 
							class="tab-item" 
							:class="{ active: currentTab === 'direct' }"
							@click="switchTab('direct')"
						>
							<text class="tab-text">直推</text>
						</view>
					</view>
				</view>
				
				<view class="members-list" v-if="filteredMembers.length">
					<view 
						class="member-item" 
						v-for="(member, index) in filteredMembers" 
						:key="member.id"
					>
						<view class="member-avatar">
							<image :src="member.avatar" class="avatar-img" mode="aspectFill"></image>
							<view class="level-badge" v-if="member.level">
								<text class="badge-text">{{ member.level }}</text>
							</view>
						</view>
						
						<view class="member-info">
							<view class="member-header">
								<text class="member-name">{{ member.nickname }}</text>
								<text class="member-type" v-if="member.isDirect">直推</text>
							</view>
							<text class="join-time">加入时间：{{ member.joinTime }}</text>
							<view class="member-stats">
								<text class="stats-text">团队：{{ member.teamCount }}人</text>
								<text class="stats-text">贡献：¥{{ member.contribution }}</text>
							</view>
						</view>
						
						<view class="member-actions">
							<view class="action-btn" @click="viewMemberDetail(member)">
								<u-icon name="eye" size="16" color="#666"></u-icon>
							</view>
						</view>
					</view>
				</view>
				
				<view class="empty-members" v-else>
					<image src="/static/empty-team.png" class="empty-image" mode="aspectFit"></image>
					<text class="empty-text">暂无团队成员</text>
					<button class="invite-btn-large" @click="showInviteCode">
						<text class="btn-text">立即邀请</text>
					</button>
				</view>
			</view>
		</scroll-view>
		
		<!-- 邀请码弹窗 -->
		<u-popup v-model="showInviteModal" mode="center" border-radius="12">
			<view class="invite-modal">
				<view class="modal-header">
					<text class="modal-title">邀请好友</text>
					<view class="close-btn" @click="showInviteModal = false">
						<u-icon name="close" size="20" color="#999"></u-icon>
					</view>
				</view>
				
				<view class="invite-content">
					<view class="qr-code">
						<image src="/static/qr-code.png" class="qr-image" mode="aspectFit"></image>
					</view>
					
					<view class="invite-info">
						<text class="invite-text">我的邀请码</text>
						<view class="invite-code">
							<text class="code-text">{{ inviteCode }}</text>
							<view class="copy-btn" @click="copyInviteCode">
								<u-icon name="copy" size="16" color="#27B387"></u-icon>
							</view>
						</view>
					</view>
					
					<view class="share-actions">
						<button class="share-btn wechat" @click="shareToWechat">
							<u-icon name="wechat-fill" size="20" color="#fff"></u-icon>
							<text class="btn-text">微信分享</text>
						</button>
						<button class="share-btn moments" @click="shareToMoments">
							<u-icon name="moments" size="20" color="#fff"></u-icon>
							<text class="btn-text">朋友圈</text>
						</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 'all',
			showInviteModal: false,
			inviteCode: 'YP888888',
			
			// 用户信息
			userInfo: {
				avatar: '/static/avatar.png',
				nickname: '张三',
				level: 'VIP会员'
			},
			
			// 团队统计
			teamStats: {
				totalMembers: 128,
				directMembers: 15,
				totalCommission: '12,580.50',
				monthCommission: '1,280.00'
			},
			
			// 团队成员
			teamMembers: [
				{
					id: 1,
					avatar: '/static/avatar.png',
					nickname: '李四',
					level: 'VIP',
					isDirect: true,
					joinTime: '2024-01-15',
					teamCount: 25,
					contribution: '2,580.00'
				},
				{
					id: 2,
					avatar: '/static/avatar.png',
					nickname: '王五',
					level: '普通',
					isDirect: true,
					joinTime: '2024-01-12',
					teamCount: 8,
					contribution: '880.00'
				},
				{
					id: 3,
					avatar: '/static/avatar.png',
					nickname: '赵六',
					level: '普通',
					isDirect: false,
					joinTime: '2024-01-10',
					teamCount: 3,
					contribution: '320.00'
				},
				{
					id: 4,
					avatar: '/static/avatar.png',
					nickname: '孙七',
					level: 'VIP',
					isDirect: true,
					joinTime: '2024-01-08',
					teamCount: 12,
					contribution: '1,200.00'
				}
			]
		}
	},
	computed: {
		// 过滤后的成员列表
		filteredMembers() {
			if (this.currentTab === 'direct') {
				return this.teamMembers.filter(member => member.isDirect)
			}
			return this.teamMembers
		}
	},
	onLoad() {
		this.loadTeamData()
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 加载团队数据
		loadTeamData() {
			// TODO: 调用团队数据接口
			console.log('加载团队数据')
		},
		
		// 切换标签
		switchTab(tab) {
			this.currentTab = tab
		},
		
		// 显示邀请码
		showInviteCode() {
			this.showInviteModal = true
		},
		
		// 复制邀请码
		copyInviteCode() {
			uni.setClipboardData({
				data: this.inviteCode,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					})
				}
			})
		},
		
		// 微信分享
		shareToWechat() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				title: '邀请您加入我的团队',
				summary: `我的邀请码：${this.inviteCode}`,
				success: () => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					})
				},
				fail: () => {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			})
		},
		
		// 朋友圈分享
		shareToMoments() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				title: `邀请您加入我的团队，邀请码：${this.inviteCode}`,
				success: () => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					})
				},
				fail: () => {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			})
		},
		
		// 佣金记录
		goCommissionRecord() {
			uni.navigateTo({
				url: '/pages/my/commission'
			})
		},
		
		// 提现记录
		goWithdrawRecord() {
			uni.navigateTo({
				url: '/pages/my/withdraw-record'
			})
		},
		
		// 团队规则
		goTeamRule() {
			uni.navigateTo({
				url: '/pages/my/team-rule'
			})
		},
		
		// 查看成员详情
		viewMemberDetail(member) {
			uni.navigateTo({
				url: `/pages/my/member-detail?id=${member.id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.team-page {
	background-color: #f5f5f5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	width: 100%;
}

.nav-header {
	height: 44px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	border-bottom: 1px solid #f0f0f0;
	
	.nav-back,
	.nav-right {
		padding: 5px;
	}
	
	.nav-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}
}

.team-content {
	flex: 1;
	padding: 15px;
	width: 700rpx;
	.team-stats {
		margin-bottom: 15px;
		
		.stats-card {
			background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
			border-radius: 12px;
			padding: 20px;
			color: #fff;
			
			.stats-header {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
				
				.user-avatar {
					width: 50px;
					height: 50px;
					border-radius: 25px;
					overflow: hidden;
					border: 2px solid rgba(255, 255, 255, 0.3);
					
					.avatar-img {
						width: 100%;
						height: 100%;
					}
				}
				
				.user-info {
					flex: 1;
					margin-left: 12px;
					
					.user-name {
						font-size: 16px;
						font-weight: 500;
						display: block;
						margin-bottom: 4px;
					}
					
					.user-level {
						font-size: 12px;
						opacity: 0.8;
						display: block;
					}
				}
				
				.invite-btn {
					height: 32px;
					padding: 0 16px;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.btn-text {
						font-size: 12px;
						color: #fff;
					}
				}
			}
			
			.stats-grid {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 15px;
				
				.stats-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 4px;
					
					.stats-value {
						font-size: 18px;
						font-weight: 600;
					}
					
					.stats-label {
						font-size: 12px;
						opacity: 0.8;
					}
				}
			}
		}
	}
	
	.function-menu {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		overflow: hidden;
		
		.menu-item {
			padding: 15px;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			align-items: center;
			gap: 12px;
			
			&:last-child {
				border-bottom: none;
			}
			
			.menu-icon {
				width: 32px;
				height: 32px;
				border-radius: 16px;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.menu-text {
				flex: 1;
				font-size: 14px;
				color: #333;
			}
		}
	}
	
	.team-members {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		
		.section-header {
			padding: 15px;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.section-title {
				font-size: 16px;
				color: #333;
				font-weight: 500;
			}
			
			.filter-tabs {
				display: flex;
				align-items: center;
				gap: 8px;
				
				.tab-item {
					height: 28px;
					padding: 0 12px;
					border-radius: 14px;
					background-color: #f5f5f5;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.active {
						background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
						
						.tab-text {
							color: #fff;
						}
					}
					
					.tab-text {
						font-size: 12px;
						color: #666;
					}
				}
			}
		}
		
		.members-list {
			.member-item {
				padding: 15px;
				border-bottom: 1px solid #f0f0f0;
				display: flex;
				align-items: center;
				gap: 12px;
				
				&:last-child {
					border-bottom: none;
				}
				
				.member-avatar {
					position: relative;
					width: 45px;
					height: 45px;
					border-radius: 22px;
					overflow: hidden;
					
					.avatar-img {
						width: 100%;
						height: 100%;
					}
					
					.level-badge {
						position: absolute;
						bottom: -2px;
						right: -2px;
						height: 16px;
						padding: 0 4px;
						background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
						border-radius: 8px;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.badge-text {
							font-size: 8px;
							color: #fff;
							transform: scale(0.8);
						}
					}
				}
				
				.member-info {
					flex: 1;
					
					.member-header {
						display: flex;
						align-items: center;
						gap: 8px;
						margin-bottom: 4px;
						
						.member-name {
							font-size: 14px;
							color: #333;
							font-weight: 500;
						}
						
						.member-type {
							height: 16px;
							padding: 0 6px;
							background-color: #ff9500;
							border-radius: 8px;
							font-size: 8px;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							transform: scale(0.9);
						}
					}
					
					.join-time {
						font-size: 12px;
						color: #999;
						display: block;
						margin-bottom: 4px;
					}
					
					.member-stats {
						display: flex;
						align-items: center;
						gap: 15px;
						
						.stats-text {
							font-size: 11px;
							color: #666;
						}
					}
				}
				
				.member-actions {
					.action-btn {
						width: 32px;
						height: 32px;
						border-radius: 16px;
						background-color: #f5f5f5;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
		
		.empty-members {
			padding: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.empty-image {
				width: 120px;
				height: 120px;
				margin-bottom: 20px;
				opacity: 0.6;
			}
			
			.empty-text {
				font-size: 14px;
				color: #999;
				margin-bottom: 30px;
			}
			
			.invite-btn-large {
				height: 44px;
				padding: 0 30px;
				background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
				border: none;
				border-radius: 22px;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.btn-text {
					font-size: 16px;
					color: #fff;
					font-weight: 500;
				}
			}
		}
	}
}

.invite-modal {
	width: 300px;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	
	.modal-header {
		height: 50px;
		padding: 0 20px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.modal-title {
			font-size: 16px;
			color: #333;
			font-weight: 500;
		}
		
		.close-btn {
			padding: 5px;
		}
	}
	
	.invite-content {
		padding: 20px;
		
		.qr-code {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			
			.qr-image {
				width: 120px;
				height: 120px;
			}
		}
		
		.invite-info {
			margin-bottom: 20px;
			
			.invite-text {
				font-size: 14px;
				color: #666;
				display: block;
				text-align: center;
				margin-bottom: 8px;
			}
			
			.invite-code {
				height: 40px;
				padding: 0 15px;
				background-color: #f5f5f5;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.code-text {
					font-size: 16px;
					color: #27B387;
					font-weight: 600;
					letter-spacing: 2px;
				}
				
				.copy-btn {
					padding: 5px;
				}
			}
		}
		
		.share-actions {
			display: flex;
			align-items: center;
			gap: 10px;
			
			.share-btn {
				flex: 1;
				height: 40px;
				border: none;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				
				&.wechat {
					background-color: #1aad19;
				}
				
				&.moments {
					background-color: #ff9500;
				}
				
				.btn-text {
					font-size: 12px;
					color: #fff;
				}
			}
		}
	}
}
</style>